<template>
  <a-modal
    :visible="visible"
    :keyboard="true"
    :centered="true"
    :destroy-on-close="true"
    @cancel="closeModal"
  >
    <div class="modal-content">
      <div class="modal-title">
        <a-icon-font class="modal-icon" type="iconweiwanpeizhi"></a-icon-font
        ><strong style="width: 100%;">{{ title }}</strong>
      </div>
      <div class="modal-body">
        <div v-if="title.includes('无法卸载')">
          <p>
            当前{{
              type === 1 ? '算法' : '模型'
            }}已应用且有以下项目在使用，无法卸载。若仍需卸载，请先至项目中解除应用关系。
          </p>
          <p v-for="item in projectIds" :key="`used-ids-${item.id}`">
            <a @click="goProject(item.id)">> &emsp;{{ item.name }}</a>
          </p>
        </div>

        <p v-else>确认要从本地卸载当前模型吗？</p>
      </div>
    </div>
    <template slot="footer">
      <a-button v-show="false" @click="closeModal">取消</a-button>
      <a-button type="primary" @click="closeModal">知道了</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class VisionModal extends Vue {
  @Prop({ type: Boolean, default: false }) visible!: boolean
  @Prop({ type: Array, default: 0 }) projectIds!: any[]
  @Prop({ type: String, default: '' }) title!: string
  @Prop({ type: Number, default: 0 }) type!: number

  public goProject(id: any) {
    this.$router.push(`/project/${id}`)
  }

  public closeModal() {
    this.$emit('cancel')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
/deep/.ant-modal-footer {
  border-top: 0;
}

.modal-content {
  padding: 32px 32px 0;
  width: 100%;

  .modal-title {
    align-items: center;
    display: flex;
    font-size: 16px;
    margin-bottom: 20px;
    width: 100%;

    .modal-icon {
      font-size: 24px;
      margin-right: 14px;
    }
  }

  .modal-body {
    margin-left: 40px;
  }

  p {
    color: #5d637e;
  }
}
</style>
